<template>
    <block title="货品种类销售量统计">
        <div ref="chart" class="chart-p">

        </div>
    </block>
</template>
<script lang="ts" setup>
import tabhead from '@/components/tabhead.vue';
import block from '@/components/block.vue';
import { onMounted, ref } from 'vue';
import echarts from '@/components/echarts';
const chart = ref()

onMounted(() => {
    var myChart = echarts.init(chart.value);
    var option;

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
                axisLabel: {
                    color: '#fff'  // 设置X轴标签颜色为绿色
                }
            }
        ],
        yAxis: {
            type: 'value',
            name: '吨',
            nameTextStyle: {
                color: '#fff'
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                color: '#fff'  // 设置X轴标签颜色为绿色
            }
        },
          
        series: [
            {
                name: '广东菜心',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '上海青',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '春菜',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                    focus: 'series'
                },
                data: [150, 232, 201, 154, 190, 330, 410]
            }
        ]
    };

    option && myChart.setOption(option);

})

</script>
<style scoped>
.chart-p {
    height: 24vh;
}
</style>